<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>jQuerry基本</title>
</head>

<body>

  <div class="jumbotron">
  <div class="col-md-offset-4 container">
  <h1><b>jQuery</b></h1>
  </div>
  </div>

  <span class="label label-lg label-default" id="l_default">Default</span>
  <span class="label label-primary" id="l_primary">Primary</span>
  <span class="label label-success" id="l_success">Success</span>
  <span class="label label-info" id="l_info">Info</span>
  <span class="label label-warning" id="l_warning">Warning</span>
  <span class="label label-danger" id="l_danger">Danger</span>

<br>
<br>
<button type="button" name="button" id="b_warning">按钮</button>


<p>jQuery Selectors</p>
<p class="foo"> Paragraph with class.</p>
<p><span>Paragraph with span.</span></p>
<p id="bar">Paragraph with ID. <span class="foo">Span with class and inside the paragraph-with-id.</span></p>
<div>
<p my-id="my_para">Paragraph (with custom id) inside the div</p>
<p my-id="my_para2"><span>Span inside the paragraph (with custom id) inside the div</span></p>
</div>

<!-- 从CDN加载jquery库 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!-- 从文件加载jquery库 -->
<!-- <script src="../jquery-3.6.0.min.js"></script> -->

<script src="./jqscript.js"></script>

<!-- <script type="text/javascript">
  $(function() {
    $("#l_default").hide(1000); // hide id = 'l_default' using # operator after 300 ms
  });
</script> -->

</body>

</html>
